<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:products</h1>

        <ul>
            <li v-for="item in productData" :key="item.id" >
                <b>
                产品名称：{{item.title}}
                </b>
    ---
                <b>
                价格：{{item.price}}
                </b>
     ---
                <b>
                库存：{{item.inventory}}
                </b>
                <button :disabled="item.inventory===0" @click="addCart(item)">+加入库存</button>

            </li>
        </ul>
    </fieldset>
</template>

<script>
// 请求服务器在product里渲染
// 添加购物车
// 点击相同后，数量加一，库存减一
import { mapActions,mapState } from 'vuex';
export default{

    methods:{
        addCart(current){ 
             //current 点击按钮选中的数据这里等价于item
             console.log(current);
             this.ADD_CART(current);
        },
        ...mapActions('product',['FETCH_PRODUCT']),
        ...mapActions('cart',['ADD_CART'])
    },
    computed:{
        ...mapState('product',['productData'])
    },
    mounted(){
       this. FETCH_PRODUCT();
    }
}


</script>